<!-- 城市配置详情 -->
<template>
  <div>省份/城市：上海—上海市</div>
  <Tabs v-model="showTab" type="card">
    <TabPane label="区域" name="region">
      <div>城市-区域</div>
    </TabPane>
  </Tabs>
  <div class="table">
    <dt-grid ref="tableRef" :onFetch="onFetch" page></dt-grid>
  </div>
</template>

<script setup>
  import { ref, onMounted, watch } from 'vue'
  import apiMgr from '../biz/index.js'
  import { listOpt } from '../opt/detailColumns'
  import { useRouter } from 'vue-router'
  const router = useRouter()

  const [tableRef] = [ref()]
  let showTab = ref('region')
  watch(showTab, (newVal) => {
    if (newVal === 'region') {
      tableRef.value.init(new listOpt())
      tableRef.value.fetch()
    }
  })
  onMounted(() => {
    tableRef.value.init(new listOpt())
    tableRef.value.fetch()
  })

  function onFetch(obj) {
    let params = {
      ...obj,
      parentCode: router.currentRoute.value.query.cityCode,
      level: 4
    }

    return apiMgr.citySetting(params).then((res) => {
      return res
    })
  }
</script>

<style scoped lang="scss"></style>
